<template>
  <div class="index-page">
    <pageHead :title='title'></pageHead>
    <div class="form">
      <div class="input">
        <div class="view clearfix">
          <span class="fl">旧修改登录密码：</span>
          <input
            type="text"
            placeholder="请输入旧密码"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix">
          <span class="fl">新密码：</span>
          <input
            type="number"
            placeholder="请输入8~16位新密码"
            class="fl"
          >
        </div>
      </div>
      <div class="input">
        <div class="view clearfix">
          <span class="fl">确认新密码：</span>
          <input
            type="text"
            placeholder="请再次输入新密码"
            class="fl"
          >
        </div>
      </div>
    </div>
    <div class="btn">确定提交</div>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {
      cur: '',
      title: ''
    }
  },
  activated: function () {
    this.cur = this.$route.query.id
    if (this.$route.query.id === 0) {
      this.title = '修改登录密码'
    } else if (this.$route.query.id === 1) {
      this.title = '修改二级密码'
    }
  },
  mounted: function () {},
  methods: {},
  destroyed: function () {
    this.cur = ''
    this.title = ''
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .form {
    .input {
      background: #fff;
      margin-top: 0.1rem;
      &:first-child {
        margin-top: 0;
      }
      .view {
        height: 1rem;
        line-height: 1rem;
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        span {
          width: 2.5rem;
          font-size: 0.3rem;
          color: #313131;
        }
        input {
          width: 2.45rem;
          height: 1rem;
          font-size: 0.3rem;
        }
      }
    }
  }

  .btn {
    font-size: 0.3rem;
    color: #ffffff;
    text-align: center;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #0192dd;
    border-radius: 0.5rem;
    margin-top: 0.6rem;
    cursor: pointer;
  }
}
</style>
